<template>
  <div class="payment">
    <div class="center">
      <p class="title">支付信息</p>
      <p class="msg">订单信息已提交成功，请尽快支付！</p>
      <p class="msg">
        <span>订单编号：{{ orderNumber }}</span>
        <span style="float:right">
          应付金额：
          <span class="color">{{ Allmany }}元</span>
        </span>
      </p>
      <p class="msg">请在{{content}}内完成支付，否则订单会被自动取消</p>
      <p class="message">合同信息</p>
      <!-- 合同信息 -->
      <div style="height: 500px;">
        
        <iframe :src="pdfUrl"  width="100%" height="100%" border="0"></iframe>
        <!-- <p>{{ pdfUrl }}</p> -->
        <!-- <mypdf></mypdf> -->
      </div>
      <el-checkbox v-model="readChecked" class="no1">
        我已阅读
        <a href="www.baidu.com">《租赁合同》</a>相关条教内容，无异议，确认签订
      </el-checkbox>

      <div style='margin:20px 0;'>
        <el-button @click='showBackList=false , flag=1'>个人账户支付</el-button>
        <el-button @click='showBackList=true, flag=2'>公司账户支付</el-button>
      </div>
      <el-radio-group v-show='showBackList' class='bankBox' v-model="bankRadio">
        <el-radio :label='item.code' v-for='item in bankList' :key='item.code'><img :src="item.url"></el-radio>
      </el-radio-group>

      <div style='display: flex;justify-content:flex-end'>
        <el-button @click='payCost' style='background:#dd253c;color: #fff;width: 20%;' :loading='payBtnLoading'>确认支付</el-button>
      </div>

      <!--支付二维码弹框-->
      <el-dialog
        title="扫码支付"
        :visible.sync="dialogVisible"
        width="30%"
        style='padding: 10px;'>
        <img :src='payImg' style='display: block;margin: 0 auto;width: 300px;height: 300px;'>
      </el-dialog>
<!--      <div>-->
<!--        <el-button type="warning" class="confirm" @click="payment">确认支付</el-button>-->
<!--      </div>-->
    </div>
  </div>
</template>
<script>
const bankItem=[
  {url:require('../../assets/bank/0100.png'),code:'0100',disable:false},
  {url:require('../../assets/bank/0102.png'),code:'0102',disable:false},
  {url:require('../../assets/bank/0103.png'),code:'0103',disable:false},
  {url:require('../../assets/bank/0104.png'),code:'0104',disable:false},
  {url:require('../../assets/bank/0105.png'),code:'0105',disable:false},
  {url:require('../../assets/bank/0301.png'),code:'0301',disable:false},
  {url:require('../../assets/bank/0302.jpg'),code:'0302',disable:false},
  {url:require('../../assets/bank/0303.png'),code:'0303',disable:false},
  {url:require('../../assets/bank/0304.png'),code:'0304',disable:false},
  {url:require('../../assets/bank/0305.png'),code:'0305',disable:false},
  {url:require('../../assets/bank/0307.png'),code:'0307',disable:false},
  {url:require('../../assets/bank/0308.png'),code:'0308',disable:false},
  {url:require('../../assets/bank/0309.png'),code:'0309',disable:false},
  {url:require('../../assets/bank/0310.png'),code:'0310',disable:false},
  {url:require('../../assets/bank/04012900.png'),code:'04012900',disable:false},
  {url:require('../../assets/bank/04504520.png'),code:'04504520',disable:false}
]

export default {
  // components: { pdf },
  data() {
    return {
      Allmany: {},
      readChecked: false,
      pdf: '',
      radio: '1',
      activeName: 'first',
      orderNumber: '',
      pdfUrl: '',
      bankList:bankItem,
      payImg:'',
      flag:0,
      dialogVisible:false,
      showBackList:false,
      payBtnLoading:false,
      bankRadio:'',
      totalTime : 3600 * 24 * 2,
      content:'3天0小时0分0秒',
    }
  },
  created() {
    // this.contractTemplate()

    this.getAllmany()
    this.pdfPreview()
    this.countDown()
  },
  methods: {
    countDown() {
      let clock = window.setInterval(() => {
        this.totalTime--;
        const y = Math.floor(this.totalTime/(3600 * 24));
        const m = Math.floor((this.totalTime -  (y * 3600 * 24))/3600);
        const d = Math.floor((this.totalTime -  ((y * 3600 * 24) + (m * 3600))) / 60);
        const s = Math.floor((this.totalTime -  ((y * 3600 * 24) + (m * 3600) + (d * 60))));
        this.content = y + '天' + m + '小时' + d + '分钟' + s + '秒';
      },1000)
      clock;
    },
    //确认支付
    payCost(){
      this.addContract()
      if(this.readChecked===false){
        return this.$message.error('请先同意租赁合同')
      }
      if( this. flag === 0){
        return this.$message.error('请先选择支付方式')
      }
      this.payBtnLoading=true
      // this.dialogVisible=true
      if(this.showBackList===true){
        this.payCompany()
      }else {
        this.paySelf()
      }
    },
    //合同新增
    addContract(){
      let data={
        "contractStatus":0,
        "discountTime":1,
        "rentEndTime":"2022-04-30",
        "rentStartTime":"2021-04-30",
        "contactUserPhone":"15975490303",
        "contactUserName":"ice",
        "taxpayerNumber":"10086",
        "companyId":"1234",
        "buildingType":"complex_building",
        "contractTypeId":0,
        "remarks":"add",
        "companyName":"xian",
        "rentArea":77,
      }
      let ctContractProjectList=['2671']
    //   let ctContractChargeSummaryList=[
    //     {chargeType: 0,unitPriceId: 5,taxRateId: 6,incTaxTotalAmount: 3481.8,noTaxTotalAmount: 3284.72,taxAmount: 197.0,totalAmount: 4062.1,billBegin:2021-05-01,billEnd:2021-05-10,tenantId:1}
    //     ,{chargeType:1,unitPriceId:5,taxRateId:6,incTaxTotalAmount:3481.8,noTaxTotalAmount:3284.72,taxAmount:197.08,totalAmount:1234,increaseTime:每隔一年,increaseType:'单价递增',increaseRate:15,billBegin:'2021-05-01',billEnd:'2021-05-10',tenantId:1}
    // ,{chargeType:2,guaranteeAmount:5000}
    // ]
      let ctContractChargeSummaryList=[{chargeType:2,guaranteeAmount:5000,id:'2020-5-10'}]
      data.ctContractProjectList=JSON.stringify(ctContractProjectList)
      data.ctContractChargeSummaryList=JSON.stringify(ctContractChargeSummaryList)
      console.log(JSON.stringify(data))
      this.$http.post('/contract/ctcontract/save',JSON.stringify(data)).then(res=>{
        console.log(res)
      })
    },
    //个人账户支付
    paySelf(){
      this.selfLoading=true
      const data={
        "resultType": 2,
        "amount": this.Allmany*100,
        "validTime": 10,
        "businessId": this.orderNumber,
        "businessNotifyUrl": this.baseURL+'/payments/pay/notify',
        "returnUrl": this.baseURL+'/parkService/success'
      }
      this.$http.post('/pc/remote/pay/cuspay',data).then(res=>{
        console.log(res)
        if(res.data.code===0){
          this.dialogVisible=true
          this.payBtnLoading=false
          this.payImg=res.data.data
        }else {
          this.payBtnLoading=false
          this.$message.error(res.data.msg)
        }
      })
    },
    //公司账户支付
    payCompany(){
      let data={
        "bankCode": this.bankRadio,
        "amount": this.Allmany*100,
        "gatewayType": 1,
        "validTime": 50,
        "businessId": this.orderNumber,
        "businessNotifyUrl": this.baseURL+'/payments/pay/notify',
        "returnUrl": this.baseURL+'/parkService/success'
      }
      this.$http.post('/pc/remote/pay/gateway',data).then(res=>{
        const {data}=res.data
        console.log(data)
        if(res.data.code===0){
          const div = document.createElement('div');
          div.innerHTML = data;
          document.body.appendChild(div);
          document.getElementById("payForm").submit();
        }else{
          this.$message.error(res.data.msg)
          this.payBtnLoading=false
        }
      })
    },
    payment(){
      let that = this
      if (!this.readChecked) {
        return that.$message.warning('请阅读并勾选协议！')
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    getAllmany() {
      this.orderNumber = this.$route.query.id
      this.Allmany = this.$route.query.money
    },
    pdfPreview() {
      this.$http({
        url: `/webcontract/ctcontract/generateContractPdf`,
        method: 'get',
        responseType: 'arraybuffer', //一定要设置响应类型，否则页面会是空白pdf
        params: { orderNumber: 1, serviceType: 1 }
      }).then(res => {
        const binaryData = []
        binaryData.push(res['data'])
		console.log(binaryData)
        //获取blob链接
        this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }))
      })
    }
  }
}
</script>
<style lang='less' scoped>

.bankBox{
  margin-bottom: 60px;
  display: flex;
  flex-wrap: wrap;
  .el-radio{
    display: flex;
    width: 25%;
    height: 40px;
    padding: 0;
    align-items: center;
    margin: 20px 0;
    img{
      width: 100%;
      height: 100%;
    }
  }
}

.table-html-wrap /deep/ table {
  border-right: 1px solid #e8eaec;
  border-bottom: 1px solid #e8eaec;
  border-collapse: collapse;
  margin: auto;
}

.table-html-wrap /deep/ table td {
  border-left: 1px solid #e8eaec;
  border-top: 1px solid #e8eaec;
  white-space: nowrap;
  text-align: center;
  padding: 0.5rem;
}

.table-html-wrap /deep/ tbody tr:nth-of-type(1) {
  font-weight: bold;
  font-size: 20px;
}
html {
  color: rgb(102, 102, 102);
}

li {
  display: inline;
}

a {
  text-decoration: none;
}

.center {
  margin: 30px 200px 60px;
}

.box {
  width: 700px;
  height: 50px;
  border: 1px solid #eeefff;
  padding: 20px;
}

.title {
  font-size: 18px;
  text-align: center;
  font-weight: normal;
  margin: 25px 0;
}

.bottom {
  margin: 30px 10px;
}

.content {
  font-size: 12px;
}

.no1 {
  margin: 14px 0;
}

.order {
  float: right;
  margin-bottom: 15px;
}

.confirm {
  float: right;
  margin-bottom: 10px;
}

.message {
  color: rgb(64, 158, 255);
  margin-bottom: 10px;
}

.color {
  color: rgb(235, 138, 77);
}

.msg {
  margin-bottom: 10px;
}
</style>
